<template>
    <div class="myorder" v-if="orderList">
        <Tabs value="name1">
            <TabPane label="全部订单" name="name1">
                <div class="order-list" v-if="orderList">
                    <div class="thead">
                        <div class="good-info">
                            <span class="th-name">商品</span>
                            <span class="th-price">单价</span>
                            <span class="th-num">数量</span>
                        </div>
                        <div class="good-state">
                            <span class="th-payment">实付款</span>
                            <span class="th-state">交易状态</span>
                            <span class="th-operation">操作</span>
                        </div>
                    </div>

                    <div class="null-order" v-if="orderList.length == 0">
                        <img src="../assets/img/pig.png" alt="">
                        <p>很抱歉，您还没有挑选宝贝进行购买哦！</p>
                    </div>

                    <div class="store"  v-for="(item,index) in orderList" :key="index">
                        <div class="order-info">
                            <div class="info-box">
                                <span class="order-serial">订单编号：{{item.orderInfo.oid}}</span>
                                <span class="order-time">{{item.orderInfo.addtime}}</span>
                                <span class="store-name">店铺：{{item.orderInfo.brandName}}</span>
                            </div>
                        </div>
                        <div class="goodlist">
                            <div class="left">
                                <div class="item" v-for="(items,indexs) in item.orderProComms" :key="indexs">
                                    <div class="good">
                                        <div class="img" :style="'background-image:url('+items.proUrl+')'"></div>
                                        <div class="good-content">
                                            <p>{{items.proName}}</p>
                                            <p>{{items.proInfo}}</p>
                                        </div>
                                    </div>
                                    <div class="price">¥{{items.salesPrice}}</div>
                                    <div class="num">{{items.commodityNum}}</div>
                                </div>
                            </div>
                            <div class="right">
                                <div class="r-left">
                                    <p class="price">¥{{item.orderInfo.amountPayable}}</p>
                                    <p>（包邮）</p>
                                </div>
                                <div class="r-center">
                                    <p class="order-state" v-if="item.orderInfo.orderStatus == 101001">等待付款</p>
                                    <p class="order-state" v-if="item.orderInfo.orderStatus == 101002">等待发货</p>
                                    <p class="order-state" v-if="item.orderInfo.orderStatus == 101003">已发货</p>
                                    <p class="order-state" v-if="item.orderInfo.orderStatus == 101008">交易完成</p>                                    
                                    <p class="order-detail" @click="go(item.orderInfo.oid)" v-if="item.orderInfo.orderStatus != 101004 && item.orderInfo.orderStatus != 101005">订单详情</p>
                                    <p v-if="item.orderInfo.orderStatus == 101004 || item.orderInfo.orderStatus == 101005">交易关闭</p>
                                </div>
                                <div class="r-right" v-if="item.orderInfo.orderStatus == 101001">
                                    <p><countdown :endTime="item.orderInfo.addTime+86400000" :callback="callback" endText="订单已关闭"></countdown></p>
                                    <button @click="paymoney(item.orderInfo.oid,item.orderInfo.amountPayable)">立即付款</button>
                                    <p class="cancelorder" @click="cancelorder(item.orderInfo.oid)">取消订单</p>
                                </div>
                                <div class="r-right" v-if="item.orderInfo.orderStatus == 101005">
                                    <p>超时未支付</p>
                                </div>
                                <div class="r-right" v-if="item.orderInfo.orderStatus == 101004">
                                    <p>买家取消订单</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="page">
                        <Page :total="totalCount" @on-change="changepage"></Page>
                    </div>
                </div>
            </TabPane>
            <!-- 待付款 -->
            <TabPane :label="label_0" name="name2">
                <div class="order-list" v-if="orderList_0">
                    <div class="thead">
                        <div class="good-info">
                            <span class="th-name">商品</span>
                            <span class="th-price">单价</span>
                            <span class="th-num">数量</span>
                        </div>
                        <div class="good-state">
                            <span class="th-payment">实付款</span>
                            <span class="th-state">交易状态</span>
                            <span class="th-operation">操作</span>
                        </div>
                    </div>
                    <!-- 新加选择按钮 -->
                    <div class="choose" v-if="orderList_0.length != 0">
                        <Checkbox v-model="single" class="checkbos" @on-change="handleCheckAll"></Checkbox>
                        <span>全选</span>
                    </div>
                    <div class="null-order" v-if="orderList_0.length == 0">
                        <img src="../assets/img/pig.png">
                        <p>很抱歉，您还没有挑选宝贝进行购买哦，小猪已经准备好了宝贝等你来挑选哦！</p>
                    </div>
                    <div class="store"  v-for="(item,index) in orderList_0" :key="index">
                        <div class="order-info">
                            <div class="info-box">
                                <span class="order-serial">
                                    <Checkbox v-model="item.showFlag" class="checkbostwo" @on-change="checksecond(item)"></Checkbox>
                                    订单编号：{{item.orderInfo.oid}}
                                </span>
                                <span class="order-time">{{item.orderInfo.addtime}}</span>
                                <span class="store-name">店铺：{{item.orderInfo.brandName}}</span>
                            </div>
                        </div>
                        <div class="goodlist">
                            <div class="left">
                                <div class="item" v-for="(items,indexs) in item.orderProComms" :key="indexs">
                                    <div class="good">
                                        <div class="img" :style="'background-image:url('+items.proUrl+')'"></div>
                                        <div class="good-content">
                                            <p>{{items.proName}}</p>
                                            <p>{{items.proInfo}}</p>
                                        </div>
                                    </div>
                                    <div class="price">¥{{items.salesPrice}}</div>
                                    <div class="num">{{items.commodityNum}}</div>
                                </div>
                            </div>
                            <div class="right">
                                <div class="r-left">
                                    <p class="price">¥{{item.orderInfo.amountPayable}}</p>
                                    <p>（包邮）</p>
                                </div>
                                <div class="r-center">
                                    <p class="order-state" v-if="item.orderInfo.orderStatus == 101001">等待付款</p>                                    
                                    <p class="order-detail" @click="go(item.orderInfo.oid)">订单详情</p>
                                </div>
                                <div class="r-right" v-if="item.orderInfo.orderStatus == 101001">
                                    <p><countdown :endTime="item.orderInfo.addTime+86400000" :callback="callback" endText="订单已关闭"></countdown></p>
                                    <button @click="paymoney(item.orderInfo.oid,item.orderInfo.amountPayable)">立即付款</button>
                                    <p class="cancelorder" @click="cancelorder(item.orderInfo.oid)">取消订单</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 新增付款商品 -->
                    <!-- <div class="pay">
                        <p>共{{orderList_0num}}件商品，总计<span>¥ {{orderList_0money}}</span></p>
                        <div class="paybutton">付款</div>
                    </div> -->
                    <!-- 底部合计 -->
                    <div class="mer-foot" v-if="orderList_0.length != 0">
                        <div class="mer-total">
                            <div class="mer-money">
                                <span class="fontbig">¥ {{orderList_0money}}</span><p>共<span>{{orderList_0num}}</span>件商品，总计 </p>
                            </div>
                            <div class="close" @click="jsclose">付款</div>
                        </div>
                    </div>
                </div>
            </TabPane>
            <!-- 待发货 -->
            <TabPane :label="label_1" name="name3">
                <div class="order-list" v-if="orderList_1">
                    <div class="thead">
                        <div class="good-info">
                            <span class="th-name">商品</span>
                            <span class="th-price">单价</span>
                            <span class="th-num">数量</span>
                        </div>
                        <div class="good-state">
                            <span class="th-payment">实付款</span>
                            <span class="th-state">交易状态</span>
                            <span class="th-operation">操作</span>
                        </div>
                    </div>

                    <div class="null-order" v-if="orderList_1.orderLists.length == 0">
                        <img src="../assets/img/pig.png" alt="">
                        <p>很抱歉，您还没有挑选宝贝进行购买哦，小猪已经准备好了宝贝等你来挑选哦！</p>
                    </div>

                    <div class="store"  v-for="(item,index) in orderList_1.orderLists" :key="index">
                        <div class="order-info">
                            <div class="info-box">
                                <span class="order-serial">订单编号：{{item.orderInfo.oid}}</span>
                                <span class="order-time">{{item.orderInfo.addtime}}</span>
                                <span class="store-name">店铺：{{item.orderInfo.brandName}}</span>
                            </div>
                        </div>
                        <div class="goodlist">
                            <div class="left">
                                <div class="item" v-for="(items,indexs) in item.orderProComms" :key="indexs">
                                    <div class="good">
                                        <div class="img" :style="'background-image:url('+items.proUrl+')'"></div>
                                        <div class="good-content">
                                            <p>{{items.proName}}</p>
                                            <p>{{items.proInfo}}</p>
                                        </div>
                                    </div>
                                    <div class="price">¥{{items.salesPrice}}</div>
                                    <div class="num">{{items.commodityNum}}</div>
                                </div>
                            </div>
                            <div class="right">
                                <div class="r-left">
                                    <p class="price">¥{{item.orderInfo.amountPayable}}</p>
                                    <p>（包邮）</p>
                                </div>
                                <div class="r-center">      
                                    <p class="order-state" v-if="item.orderInfo.orderStatus == 101002">等待发货</p>
                                    <p class="order-detail" @click="go(item.orderInfo.oid)">订单详情</p>
                                </div>
                                <div class="r-right" v-if="item.orderInfo.orderStatus == 101001">
                                    <p><countdown :endTime="item.orderInfo.addTime+86400000" :callback="callback" endText="订单已关闭"></countdown></p>
                                    <button @click="paymoney(item.orderInfo.oid,item.orderInfo.amountPayable)">立即付款</button>
                                    <p class="cancelorder" @click="cancelorder(item.orderInfo)">取消订单</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="page">
                        <Page :total="orderList_1.totalCount" @on-change="changepagetwo"></Page>
                    </div>
                </div> 
            </TabPane>
            <!-- 待收货 -->
            <TabPane :label="label_2" name="name4">
                <div class="order-listdaishouhuo" v-if="orderList_2">
                    <div class="thead">
                        <div class="good-info">
                            <span class="th-name">商品</span>
                            <span class="th-price">单价</span>
                            <span class="th-num">数量</span>
                        </div>
                        <div class="good-state">
                            <span class="th-payment">实付款</span>
                            <span class="th-state">交易状态</span>
                            <span class="th-operation">操作</span>
                        </div>
                    </div>

                    <div class="null-order" v-if="orderList_2.orderLists.length == 0">
                        <img src="../assets/img/pig.png" alt="">
                        <p>很抱歉，您还没有挑选宝贝进行购买哦，小猪已经准备好了宝贝等你来挑选哦！</p>
                    </div>

                    <div class="store"  v-for="(item,index) in orderList_2.orderLists" :key="index">
                        <div class="order-info">
                            <div class="info-box">
                                <span class="order-serial">订单编号：{{item.orderInfo.oid}}</span>
                                <span class="order-time">{{item.orderInfo.addtime}}</span>
                                <span class="store-name">店铺：{{item.orderInfo.brandName}}</span>
                            </div>
                        </div>
                        <div class="goodlist">
                            <div class="left">
                                <div class="item" v-for="(items,indexs) in item.orderProComms" :key="indexs">
                                    <div class="good">
                                        <div class="img" :style="'background-image:url('+items.proUrl+')'"></div>
                                        <div class="good-content">
                                            <p>{{items.proName}}</p>
                                            <p>{{items.proInfo}}</p>
                                        </div>
                                    </div>
                                    <div class="price">¥{{items.salesPrice}}</div>
                                    <div class="num">{{items.commodityNum}}</div>
                                </div>
                            </div>
                            <div class="right">
                                <div class="r-left">
                                    <p class="price">¥{{item.orderInfo.amountPayable}}</p>
                                    <p>（包邮）</p>
                                </div>
                                <div class="r-center">
                                    <p class="order-state">已发货</p>                                  
                                    <p class="order-detail" @click="go(item.orderInfo.oid)">订单详情</p>
                                </div>
                                <div class="r-right">
                                    <button @click="confirmgood(item.orderInfo.oid)">确认收货</button>       
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="page">
                        <Page :total="orderList_2.totalCount" @on-change="changepagethree"></Page>
                    </div>
                </div>
            </TabPane>
        </Tabs>
        <modal :visible.sync="cancelmodal" content="是否确定取消该订单？" @determine="suredetermine"></modal>
        <modal :visible.sync="confirmmodal" content="您是否确定已收到货物？" @determine="receiptgoods"></modal>
    </div>
</template>
<script>
import Vue from "vue";
import { Tabs, TabPane, Badge, Page, Checkbox  } from "iview";
Vue.component(Badge.name, Badge);
import Modal from "../components/modal.vue";
import Countdown from "../components/countdown.vue";
import { orderList,orderCancel,orderEndStatus } from "../http/api";
export default {
    components: {
        Tabs,
        TabPane,
        Page,
        Modal,
        Countdown,
        Checkbox 
    },
    data() {
        return {
            label_0: h => {
                let num = "";
                if (this.orderList_0) {
                    num = this.orderList_0.length;
                }
                return h("div", [
                    h("span", "待付款"),
                    h("Badge", {
                        props: {
                            count: num,
                            overflowCount: "999",
                            className: "dot-num"
                        }
                    })
                ]);
            },
            label_1: h => {
                let num = "";
                if (this.orderList_1) {
                    num = this.orderList_1.totalCount;
                }
                return h("div", [
                    h("span", "待发货"),
                    h("Badge", {
                        props: {
                            count: num,
                            overflowCount: "999",
                            className: "dot-num"
                        }
                    })
                ]);
            },
            label_2: h => {
                let num = "";
                if (this.orderList_2) {
                    num = this.orderList_2.totalCount;
                }
                return h("div", [
                    h("span", "待收货"),
                    h("Badge", {
                        props: {
                            count: num,
                            overflowCount: "999",
                            className: "dot-num"
                        }
                    })
                ]);
            },
            cancelmodal: false,
            confirmmodal: false,
            orderList: null, //订单总列表
            orderList_0: null, //待付款订单  
            orderList_0num:0,  //待付款商品件数
            ALLmoney:0,  //待付款总计
            orderList_1: null, //待发货订单
            orderList_2: null, //待收货订单
            totalCount: null, //总条数
            single: false,    //按钮默认状态
            oid:null,         //传入的订单号
            pageNoe:1,        //分页
        };
    },
    computed:{
        orderList_0money : function () {
            if(this.ALLmoney == 0){
                return this.ALLmoney + ".00"
            }else{
                return this.ALLmoney.toFixed(2)
            }
        }
    },
    methods: {
        cancelorder(orderInfoid) {
            this.oid = orderInfoid
            this.cancelmodal = true;
        },
        // 确认收货
        confirmgood(oid) {
            this.oid = oid
            this.confirmmodal = true;
        },      
        //订单列表接口
        api_orderList(pageNoe, type) {
            //需要传的oids数组
            this.oids = []
            orderList({ pageNo: pageNoe, orderStatus: type }).then(response => {
                // console.log(response);
                if (response.data.orderLists) {
                    if (type == "101001") {
                        this.orderList_0 = response.data.orderLists;
                    } else if (type == "101002") {
                        this.orderList_1 = response.data;
                        // console.log(this.orderList_1.totalCount)
                    } else if (type == "101003") {
                        this.orderList_2 = response.data;
                        // console.log(this.orderList_2.totalCount)
                    } else {
                        this.orderList = response.data.orderLists;
                        this.totalCount = response.data.totalCount;
                    }
                }
            });
        },
        //待付款全选按钮
        handleCheckAll () {
            //件数和总计先清0
            this.orderList_0num = 0
            this.ALLmoney = 0
            //清空传递数组
            this.oids = [] 
            if(this.single){
                this.orderList_0.map((item,index) =>{
                    item.showFlag = true
                    //算出件数和总计总和
                    item.orderProComms.map(list =>{
                        this.orderList_0num += list.commodityNum
                    }) 
                    this.ALLmoney += item.orderInfo.amountPayable
                    //需要传的oids
                    this.oids.push(item.orderInfo.oid)
                })               
            }else{
                this.orderList_0.map((item,index) =>{
                    item.showFlag = false
                })                                 
            }    
        },
        //待付款单件商品选择
        checksecond (item) {
            if(item.showFlag){
                let flag = true
                this.orderList_0.map((items,index) =>{
                    //如果状态是true的情况下，遍历总体，如果有一个不是正确的，flag是false，如果状态都是true，全选勾选
                    if(!items.showFlag){
                        flag = false
                    }
                })
                if(flag){
                    this.single = true
                }
                //件数和金钱
                item.orderProComms.map(list =>{
                    this.orderList_0num += list.commodityNum
                }) 
                this.ALLmoney += item.orderInfo.amountPayable
                //传递的oids数组
                this.oids.push(item.orderInfo.oid)             
            }else{
                this.single = false
                item.orderProComms.map(list =>{
                        this.orderList_0num -= list.commodityNum
                    })
                this.ALLmoney -= item.orderInfo.amountPayable
                this.oids.splice(this.oids.indexOf(item.orderInfo.oid),1)
            }
        },
        //待付款底部付款
        jsclose () {
            if(this.orderList_0num == 0){
                this.$Message.info("请选择商品");
            }else{
                this.$router.push({path:"/affirminist",query:{oids:this.oids,proCount:this.orderList_0num,orderAmount:this.ALLmoney}})
            }
        },
        //如果时间到0 刷新数据
        callback: () => {
                //alert("结束了");
                orderList({ pageNo: this.pageNoe}).then(responseone => {
                    this.orderList = responseone.data.orderLists
                })
                orderList({ pageNo: this.pageNoe, orderStatus: 101001}).then(responsetwo => {
                        this.orderList_0 = responsetwo.data.orderLists;
                })
        },
        go(oid) {
            this.$router.push({ path: '/indent',query:{oid:oid} });
        },
        //是否确认取消订单
        suredetermine () {
            this.single = false
            this.orderList_0num = 0
            this.ALLmoney = 0
            orderCancel({oid:this.oid}).then(res=>{
                if(res.data.status = 1000){
                    orderList({ pageNo: this.pageNoe}).then(responseone => {
                        this.orderList = responseone.data.orderLists
                    })
                }
            })
            orderCancel({oid:this.oid}).then(res=>{
                if(res.data.status = 1000){
                    orderList({ pageNo: this.pageNoe, orderStatus: 101001}).then(responsetwo => {
                        this.orderList_0 = responsetwo.data.orderLists;
                    })
                }
            })
        },
        //是否确认收到货物
        receiptgoods () {
            // 更新待收货
            orderEndStatus({oid:this.oid}).then(res=>{
                if(res.data.status = 1000){
                    orderList({ pageNo: this.pageNoe, orderStatus: 101003}).then(responsetwo => {
                        this.orderList_2 = responsetwo.data;
                    })
                }
            })
            // 更新全部订单
            orderEndStatus({oid:this.oid}).then(res=>{
                if(res.data.status = 1000){
                    orderList({ pageNo: this.pageNoe}).then(responseone => {
                        this.orderList = responseone.data.orderLists
                    })
                }
            })
        }, 
        //立即付款
        paymoney (oid,money) {
            let num = 0
            this.orderList_0.map((items,indexs) =>{             
                if(items.orderInfo.oid == oid){
                    items.orderProComms.map(item =>{
                        num += item.commodityNum
                    })
                }
            })
            this.$router.push({path:"/affirminist",query:{proCount:num,orderAmount:money,oids:oid}})
        },
        //全部分页切换
        changepage(pageNoe) {
            this.pageNoe = pageNoe
            this.api_orderList(pageNoe);
        },
        //待发货分页切换
        changepagetwo () {
            this.pageNoe = pageNoe
            this.api_orderList(pageNoe,"101002");
        },
        //待收货分页切换
        changepagethree(pageNoe) {
            this.pageNoe = pageNoe
            this.api_orderList(pageNoe,"101003");
        }
    },
    created() {
        this.api_orderList(1);
        this.api_orderList(1, "101001");
        this.api_orderList(1, "101002");
        this.api_orderList(1, "101003");
    }
};
</script>

<style lang="less">
@import "../assets/styles/myorder.less";
</style>

